<!--
    Exception 模块组件（标题、头部配置）
    @Author： zouwf
    @Date： 2019-12-10
-->
<template>
    <div class="l-template-box">
        <!--头部-->
        <div>
            <!--默认类：左、中、右-->
            <el-row
                v-if="isTitle"
                class="l-template-box__header"
                :class="{ 'is-active-bottom': titleBottom === false }"
            >
                <el-col :span="8" class="l-template-box__header-left">
                    <span class="dg-words-title-first">{{title || titleData.left}}</span>
                </el-col>
                <el-col :span="8" class="l-template-box__header-middle">
                    <span>{{ titleData.middle }}</span>
                </el-col>
                <el-col :span="8" class="l-template-box__header-right">
                    <span>{{ titleData.right }}</span>
                    <slot name="title-right"></slot>
                </el-col>
            </el-row>
            <!--切换类-->
            <el-tabs
                    v-else-if="isTabs"
                    class="l-template-box__tabs"
                    v-model="activeName"
                    @tab-click="handleClick"
            >
                <el-tab-pane
                    v-for="(item, index) in tableToggle"
                    :key="index"
                    :label="item.label"
                    :name="item.name"
                ></el-tab-pane>
            </el-tabs>
            <!--自定义类-->
            <template v-else>
                <slot name="title"></slot>
            </template>
        </div>
        <!--主体内容-->
        <div class="l-template-box__content">
            <slot></slot>
        </div>
    </div>
</template>

<script>
export default {
    name: "index",
    props: {
        //标题
        title:{
            type: String,
        },
        //标题头部数据配置
        titleData: {
            type: Object,
            default: () => {
                return {
                    left: "",
                    middle: "",
                    right: ""
                };
            }
        },
        //是否需要标题
        isTitle: {
            type: Boolean,
            default: false
        },
        //标题线
        titleBottom: {
            type: Boolean,
            default: true
        },
        //标签切换类型
        isTabs: {
            type: Boolean,
            default: false
        },
        //标签数据
        tabData: {
            type: Array,
            default: () => [
                {
                    label: "车辆",
                    name: "first"
                },
                {
                    label: "人员",
                    name: "second"
                },
                {
                    label: "电子设备",
                    name: "third"
                }
            ]
        }
    },
    data() {
        return {
            //tab选中
            activeName: "first",
            //tab数据
            tableToggle: []
        };
    },
    methods: {
        /**
         *
         * tab切换事件
         *
         * */
        handleClick() {
            this.$emit('tabsToggle', this.activeName)
        }
    },
    created() {
        this.tableToggle = this.tabData;
    }
};
</script>
